<template>
	<view class="wallet-box">
		<u-navbar title="我的钱包" :bgColor="bgColor" placeholder autoBack />
		<view class="nav-content">
			<view class="">￥{{ (userInfo.userInfo.actualRecharge + userInfo.userInfo.giveRecharge).toFixed(2) }}</view>
			<view class="content-text">账户余额</view>
			<u-row gutter="16">
				<u-col span="3">
					<!--	<view class="content-i-btn">
						<text class="custom-icon custom-icon-tixian"></text>
						提现
					</view>-->
				</u-col>
				<u-col span="6">
					<view class="content-i-btn" @click="jumpPage('/packMyself/recharge/recharge')">
						<text class="custom-icon custom-icon-chongzhi"></text>
						充值
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="grid-box">
			<u-grid :border="true" col="2">
				<u-grid-item>
					<view class="grid-box-item" @click="jumpPage('/packMyself/balanceRecord/rechargeRecord')">
						<text class="custom-icon custom-icon-jine" style="color: #f9ad45;"></text>
						<view>
							<view>充值记录</view>
							<view class="grid-value">{{ userInfo.userInfo.actualRecharge }}元</view>
						</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="grid-box-item" @click="jumpPage('/packMyself/balanceRecord/giveRecord')">
						<text class="custom-icon custom-icon-icon-zengsong" style="color: #fa4c75;"></text>
						<view>
							<view>赠送记录</view>
							<view class="grid-value">{{ userInfo.userInfo.giveRecharge }}元</view>
						</view>
					</view>
				</u-grid-item>
				<u-grid-item @click="jumpPage('/packMyself/coupon/coupon')">
					<view class="grid-box-item">
						<text class="custom-icon custom-icon-youhuiquan" style="color: #7ec23a;"></text>
						<view>
							<view>优惠券</view>
							<view class="grid-value">
								{{ couponInfo.countNum }}张
								<text v-if="couponInfo.countNum > 0" style="font-size: 22rpx;">(可使用)</text>
							</view>
						</view>
					</view>
				</u-grid-item>
				<u-grid-item @click="jumpPage('/packMyself/myOrder/myOrder')">
					<view class="grid-box-item">
						<text class="custom-icon custom-icon-chongzhijilu" style="color: #6540bc;"></text>
						<view>
							<view>交易记录</view>
							<view class="grid-value">{{ orderInfo.countNum || 0 }}条</view>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: this.$store.state.userInfo, // 缓存的用户详情
			bgColor: '#ffc901',
			couponInfo: {}, // 优惠券信息
			orderInfo: {} // 订单信息
		};
	},
	onShow() {
		this.getCouponList();
		this.getUserOne();
		this.getOrderList();
	},
	methods: {
		// 跳转到充值页面
		jumpPage(url) {
			uni.navigateTo({
				url
			});
		},

		// 获取优惠券列表
		async getCouponList() {
			const res = await this.$api.coupon.couponList({ useStatus: 2 });
			if (res.code == 200) {
				this.couponInfo = res.data;
			}
		},
		// 获取订单列表
		async getOrderList() {
			const res = await this.$api.order.list();
			if (res.code == 200) {
				this.orderInfo = res.data;
			}
		},
		// 获取用户详情
		async getUserOne() {
			const res = await this.$api.user.getUserOne({ id: this.userInfo.id });
			if (res.code === 200) {
				this.userInfo = res.data;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.wallet-box {
	.nav-content {
		background: linear-gradient(to right, #ffc901, #f9ce32);
		text-align: center;
		padding: 80rpx 30rpx 40rpx;
		font-size: 60rpx;
		margin-bottom: 30rpx;
		color: #714400;
		.content-text {
			font-size: 28rpx;
			font-weight: bold;
			margin-top: 10rpx;
			margin-bottom: 30rpx;
		}
		.content-i-btn {
			text-align: center;
			font-size: 26rpx;
			display: flex;
			justify-content: center;
			line-height: 70rpx;
			background: #fedc01;
			border-radius: 5px;
			.custom-icon {
				vertical-align: -8rpx;
				margin-right: 10rpx;
			}
		}
	}
	.grid-box {
		background: #fff;
		padding: 30rpx 0;
		.grid-box-item {
			display: flex;
			color: #444;

			padding: 40rpx 0;
			font-size: 28rpx;
			.custom-icon {
				font-size: 68rpx;
				margin-right: 20rpx;
				margin-top: 5rpx;
			}
			.grid-value {
				font-size: 24rpx;
				color: #666;
				margin-top: 5rpx;
			}
		}
	}
}
</style>
